<!--
 * @description: navBar
 * @Author: wxy
 * @Date: 2019-11-15 15:17:35
 -->
<template>
  <van-nav-bar
    :style="{ background: bcolor, top: top + 'px' }"
    class="nav-bar"
    :class="{ noBorder: noBorder }"
    :z-index="99"
    border
    :title="titleText"
    :right-text="rightText"
    :left-text="leftText"
    @click-right="onClickRight"
    @click-left="onClickLeft"
  >
    <template slot="left">
      <van-icon v-if="back" name="arrow-left" @click="goBack" />
      <van-icon v-if="close" name="cross" @click="closePage" />
      <slot name="left-btn"></slot>
    </template>
    <template slot="right">
      <slot name="right-btn"></slot>
    </template>
    <template slot="title">
      <slot name="title"></slot>
    </template>
  </van-nav-bar>
</template>

<script>
import { closeWebview } from '@/utils/sendMsgToApp';

export default {
  name: '',
  props: {
    titleText: {
      tyepe: String,
    },
    rightText: {
      type: String,
    },
    leftText: {
      type: String,
    },
    close: {
      type: Boolean,
      default: false,
    },
    homeName: {
      type: String,
    },
    back: {
      type: Boolean,
      default: false,
    },
    backToApp: {
      // 返回到app
      type: Boolean,
      default: false,
    },
    closeToApp: {
      // 关闭页面回到app
      type: Boolean,
      default: false,
    },
    bcolor: {
      type: String,
      default: 'rgba(234,237,240,1)',
    },
    top: {
      default: 0,
    },
    noBorder: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    onClickRight() {
      this.$emit('click-right');
    },
    onClickLeft() {
      this.$emit('click-left');
    },
    goBack() {
      if (this.backToApp) {
        closeWebview();
        return false;
      } else {
        this.$router.go(-1);
      }
    },
    closePage() {
      if (this.homeName) {
        this.$router.push({
          name: this.homeName,
        });
        return false;
      } else if (this.closeToApp) {
        console.log('关闭页面回到App');
        closeWebview();
        return false;
      } else {
        this.$emit('click-close');
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-bar {
  position: fixed;
  left: 0;
  width: 100%;
  height: 46px;
  z-index: 99;
  /deep/ .van-nav-bar__title {
    font-size: 18px;
  }
  /deep/ .van-nav-bar__text {
    font-size: 17px;
  }
  /deep/ .van-nav-bar__left .van-nav-bar__text {
    color: #666;
  }
}
.noBorder::after {
  border-color: transparent;
}
.van-icon {
  font-size: 22px;
  color: #575757 !important;
}
.van-icon-arrow-left {
  margin-right: 10px;
}
</style>
